<template>
  <div>
    <h3>下面有个路由出口</h3>
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
    <hr>
    <h3>query传参</h3>
    <ul>
        <li><router-link to="/vue3/lession4/suba">去往a组件</router-link></li>
        <li><router-link :to="getUrlA()">去往a组件（传参，拼字符串）</router-link></li>       
        <li><router-link :to="getUrlAObject()">去往a组件（传参，使用对象）</router-link></li>
        <li><button @click="handleToA">编程路由</button></li>
    </ul>
    <h3>params传参</h3>
    <ul>
        <li><router-link to="/vue3/lession4/subb/曾颖萍/18">去往b组件</router-link></li>
        <li><router-link :to="getUrlB()">去往b组件（传参，拼字符串）</router-link></li>
        <li><router-link :to="getUrlBObject()">去往b组件（传参，使用对象）</router-link></li>
    </ul>
    <h3>params传参-props接收</h3>
    <ul>
        <li><router-link to="/vue3/lession4/subc/王珂/18">去往c组件</router-link></li>
        <li><router-link to="/vue3/lession4/subd/王珂/19">去往D组件</router-link></li>
    </ul>
  </div>
</template>
  
  <script lang="ts" setup>
    import {ref} from "vue";
    import {useRouter} from "vue-router";

    const router = useRouter();

    function getUrlA() {
        return "/vue3/lession4/suba?name=Hydra&age=35";
    }

    function getUrlAObject() {
        return {path: "/vue3/lession4/suba",query: {name: "奉先",age: 18}};
    }

    function handleToA() {
        router.push(getUrlAObject());
    }

    function getUrlB() {
        return "/vue3/lession4/subb/曾颖萍/19"
    }

    function getUrlBObject() {
        // 错误：params传参，如果使用了path，那么params参数失效，应该使用name替代path
        // return {path: "/vue3/lession4/suba",params: {name: "奉先",age: 18}};
        return {name: "lession4-subb",params: {name: "曾颖萍",age: 20}};
    }

</script>
  
  <style>
</style>